﻿<h4>Full Width</h4>
<FluentNumberField @bind-Value=value1 style="width: 100%;"></FluentNumberField>

<h4>Placeholder</h4>
<FluentNumberField @bind-Value=value2 Placeholder="Placeholder"></FluentNumberField>

<h4>Hide up/down steps</h4>
<FluentNumberField @bind-Value=value3 HideStep=true></FluentNumberField>

<h4>Required</h4>
<FluentNumberField @bind-Value=value4 Required="true"></FluentNumberField>

<h4>Disabled</h4>
<FluentNumberField @bind-Value=value5 Disabled="true"></FluentNumberField>
<FluentNumberField @bind-Value=value6 Disabled="true" Label="label"></FluentNumberField>
<FluentNumberField @bind-Value=value7 Disabled="true" Placeholder="placeholder"></FluentNumberField>

<h4>Read only</h4>
<FluentNumberField @bind-Value=value8 ReadOnly="true"></FluentNumberField>
<FluentNumberField @bind-Value=value9 ReadOnly="true" Label="label"></FluentNumberField>

@code {
    int? value1, value2, value3, value4, value5, value6, value7, value8=1, value9=2;
}
